<template>
  <div class="news-detail-main">
    <el-card shadow="always" class="card">
      <div slot="header">
        <span>{{ titleStatus }}文章</span>
      </div>
      <el-form
        :model="form"
        ref="form"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="文章标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="文章作者">
              <el-input v-model="form.author"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="摘要" size="small">
          <el-input
            type="textarea"
            size="normal"
            rows="2"
            v-model="form.desc"
          ></el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-button type="primary" size="small" @click="openRepos(0)">选择图片</el-button>
            </el-col>
            <el-col :span="12">
              <!-- <image style="width:120px;height:40px;" fit="contain" :src="form.cover" lazy></image> -->
              <img
                style="width: 120px; height: 40px; object-fit: contain"
                :src="form.cover"
              />
            </el-col>
            <el-col :span="4">
              <el-button
                v-if="form.cover"
                style="color: red"
                type="text"
                @click="removeCover"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8" :offset="0">
            <el-form-item label="最热" size="normal">
              <el-switch
                v-model="form.hot"
                active-color="#13ce66"
                inactive-color="#e5e5e5"
                active-value="0"
                inactive-value="1"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="显示封面">
              <el-switch
                v-model="form.coverShow"
                active-color="#13ce66"
                inactive-color="#e5e5e5"
                active-value="0"
                inactive-value="1"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="富文本类型" label-width="80">
          <el-row>
            <el-col :span="6">
              <el-radio-group @change="editorTypeChange" v-model="form.type">
                <el-radio label="0">富文本</el-radio>
                <el-radio label="1">markdown</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="10">
              <span style="color: #e6a23c; margin-left: 50px">
                <i class="el-icon-warning"></i> 切换编辑器会清空内容,请谨慎操作.
              </span>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" size="mini" @click="openRepos(1)">插入素材↓↓</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <div class="editor-box">
          <Tinymac
            ref="tin"
            v-model="content"
            v-show="form.type == '0'"
          ></Tinymac>
          <MarkdownEditor
            ref="md"
            v-model="content"
            v-show="form.type == '1'"
            class="markdown-Editor"
          ></MarkdownEditor>
        </div>

        <el-row :gutter="20" style="margin-top: 30px">
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button @click="handleClose">取消</el-button>
              <el-button type="primary" @click="doSave">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <Materials ref="mat" @handle-cover-sel="handleCoverSel" ></Materials>
  </div>
</template>

<script>
import {
  newsDetail as newsDetailApi,
  newsUpdate as newsUpdateApi,
  newsSave as newsSaveApi,
} from "@/api/repos/news";
import Tinymac from "@/components/Tinymce";
import MarkdownEditor from "@/components/MarkdownEditor";
import Materials from "./Mat";
import { resetData } from "@/utils/index";

export default {
  name: "newsDetail",
  components: {
    Tinymac,
    MarkdownEditor,
    Materials
  },
  data() {
    return {
      titleStatus: "新增",
      content: "", //原文本
      form: {
        cover: "",
        type: "0", // '0' 富文本 ; '1' markdown
      },
    };
  },
  methods: {
    init(id) {
      // var api = null;
      if (id) {
        this.titleStatus = "编辑";
        newsDetailApi({
          id,
        }).then((res) => {
          this.form = res.data;
          this.$nextTick(() => {
            // 初始化内容
            if (this.form.type == "0") {
              this.$refs.tin.setContent(this.form.content1);
            } else {
              this.$refs.md.setValue(this.form.content);
            }
          });
        });
      }
    },
    doSave() {
      var api = null;
      //有id为编辑  否则为保存
      if (this.form.id) {
        api = newsUpdateApi;
      } else {
        api = newsSaveApi;
      }
      //富文本
      if (this.form.type == "0") {
        // content1 一般是富文本/markdown原文本
        this.form.content1 = this.form.content2 = this.$refs.tin.getContent();
      } else {
        this.form.content1 = this.$refs.md.getValue();
        this.form.content2 = this.$refs.md.getHtml();
      }
      api({
        xyNews: {
          ...this.form,
        },
      }).then((res) => {
        console.log(res);
        if (res.code) {
          this.$message.success("文章上传成功!");
          this.handleClose();
          this.$router.push({
            path: "/repos/news",
          });
        } else {
          this.$message.error("文章上传失败!");
        }
      });
    },
    editorTypeChange() {
      this.content = "";
    },
    handleClose() {
      resetData(this, "form");
      this.$router.push({
        path: "/repos/news",
      });
    },
    removeCover() {
      this.form.cover = "";
    },
    handleCoverSel(url) {
      this.form.cover = url;
    },
    // 打开素材库
    openRepos(type){
        this.$refs.mat.openDialog(type);
    }
  },
  created() {
    var id = this.$route.query.id;
    this.init(id);
  },

};
</script>

<style lang="scss" scoped>
.news-detail-main {
  padding: 0 20px;
  margin-bottom: 50px;
  .card {
    margin: 10px 20px;
  }
  .editor-box {
    .markdown-Editor {
      ::v-deep .tui-editor {
        .te-md-splitter {
          width: 100%;
        }
      }
    }
  }
}
</style>